<template>
	<view class="container">
	  <!-- 新闻内容 -->
	  <view class="news-card">
		<view class="news-header">
		  <text class="title">{{ newsData.title }}</text>
		  <view class="meta">
			<text class="time">{{ newsData.time }}</text>
			<text class="dot">·</text>
			<text class="source">{{ newsData.source }}</text>
		  </view>
		</view>
		<rich-text class="content" :nodes="newsData.content"></rich-text>
	  </view>
  
	  <!-- AI解读 -->
	  <view class="analysis-card">
		<view class="card-title">
		  <text class="iconfont icon-ai"></text>
		  <text>AI解读</text>
		</view>
  
		<!-- 核心总结 -->
		<view class="section">
		  <view class="section-title">核心总结</view>
		  <view class="summary">{{ newsData.analysis.summary }}</view>
		</view>
  
		<!-- 要点分析 -->
		<view class="section">
		  <view class="section-title">要点分析</view>
		  <view class="key-points">
			<view 
			  class="point-item"
			  v-for="(point, index) in newsData.analysis.keyPoints"
			  :key="index"
			>
			  <view class="point-content">
				<text class="point-index">{{ index + 1 }}</text>
				<text class="point-text">{{ point }}</text>
			  </view>
			</view>
		  </view>
		</view>
  
		<!-- 市场影响 -->
		<view class="section">
		  <view class="section-title">市场影响</view>
		  <view class="impact">{{ newsData.analysis.marketImpact }}</view>
		</view>
	  </view>
  
	  <!-- 相关板块和个股 -->
	  <view class="related-section">
		<!-- 相关板块 -->
		<view class="sector-card">
		  <view class="card-title">
			<text class="iconfont icon-chart"></text>
			<text>相关板块</text>
		  </view>
		  <view class="sector-list">
			<view 
			  class="sector-item"
			  v-for="(sector, index) in newsData.relatedSectors"
			  :key="index"
			  @tap="handleConceptClick(sector)"
			>
			  <text class="name">{{ sector.name }}</text>
			  <text class="iconfont icon-right"></text>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <style lang="scss">
  .container {
	padding: 30rpx;
	background: #f5f6fa;
  }
  
  .news-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.news-header {
	  margin-bottom: 30rpx;
	  
	  .title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	  }
	  
	  .meta {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		
		.dot {
		  margin: 0 10rpx;
		}
		
		.iconfont {
		  margin-left: 10rpx;
		}
	  }
	}
	
	.content {
	  font-size: 28rpx;
	  line-height: 1.6;
	  color: #333;
	  
	  :deep(p) {
		margin-bottom: 16rpx;
	  }
	  
	  :deep(a) {
		color: #1890ff;
		text-decoration: none;
		
		&:active {
		  opacity: 0.8;
		}
	  }
	  
	  :deep(.keyword-search) {
		color: #1890ff;
		text-decoration: none;
	  }
	  
	  :deep(.preset-original-title) {
		font-weight: bold;
		margin-bottom: 16rpx;
	  }
	}
  }
  
  .analysis-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.section {
	  margin-bottom: 30rpx;
	  
	  .section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	  }
	  
	  .summary, .impact {
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		padding: 16rpx 20rpx;
		background: #f8f9fa;
		border-radius: 8rpx;
	  }
	  
	  .key-points {
		.point-item {
		  margin-bottom: 20rpx;
		  
		  .point-content {
			display: flex;
			padding: 16rpx 20rpx;
			background: #f8f9fa;
			border-radius: 8rpx;
		  }
		  
		  .point-index {
			width: 40rpx;
			height: 40rpx;
			background: #e6f7ff;
			color: #1890ff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			flex-shrink: 0;
		  }
		  
		  .point-text {
			flex: 1;
			font-size: 28rpx;
			line-height: 1.6;
			color: #333;
		  }
		}
	  }
	}
  }
  
  .related-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30rpx;
	
	.sector-card {
	  background: #fff;
	  border-radius: 12rpx;
	  padding: 30rpx;
	}
  }
  
  .card-title {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
	
	.iconfont {
	  font-size: 36rpx;
	  margin-right: 12rpx;
	}
  }
  
  .sector-list {
	.sector-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20rpx 0;
	  border-bottom: 1px solid #f0f0f0;
	  transition: all 0.3s;
	  
	  &:active {
		background: #f5f5f5;
	  }
	  
	  &:last-child {
		border-bottom: none;
	  }
	  
	  .name {
		font-size: 28rpx;
		color: #333;
	  }
	  
	  .iconfont {
		font-size: 28rpx;
		color: #999;
	  }
	}
  }
  
  // ... 更多样式
  </style>

<script>
export default {
	data() {
		return {
			newsData: {
				title: "",
				source: "",
				time: "",
				content: "",
				analysis: {
					summary: "",
					keyPoints: [],
					marketImpact: ""
				},
				relatedSectors: [],
				relatedStocks: []
			},
			conceptSearchResults: {}
		}
	},

	onLoad(options) {
		if (options.id) {
			this.fetchNewsDetail(options.id)
		}
	},

	methods: {
		async fetchNewsDetail(id) {
			try {
				const { result } = await uniCloud.callFunction({
					name: 'news',
					data: {
						action: 'getNewsDetail',
						params: { id }
					}
				})

				if (result.code === 200) {
					if (typeof result.data.content === 'string') {
						this.newsData = result.data
					} else {
						this.newsData = {
							...result.data,
							content: this.formatContent(result.data.content)
						}
					}
				} else {
					uni.showToast({
						title: result.msg || '获取新闻详情失败',
						icon: 'none'
					})
				}
			} catch (e) {
				console.error('获取新闻详情失败:', e)
				uni.showToast({
					title: '获取新闻详情失败',
					icon: 'none'
				})
			}
		},

		formatContent(content) {
			if (!content) return ''
			
			// 方案1: 使用正则移除原标题和时间部分
			return content.replace(/<p class="preset-original-title">.*?<\/p>/, '')  // 移除原标题
						 .replace(/<p id="\d+">.*?南方财经.*?<\/p>/, '')  // 移除时间和来源信息
			
			// 方案2: 使用CSS隐藏这些元素
			return `<style>
			  .preset-original-title { display: none; }
			  p[id^="3758"] { display: none; }
			</style>${content}`
		},

		async handleConceptClick(sector) {
			try {
				if (!sector?.name) {
					uni.showToast({
						title: '板块名称无效',
						icon: 'none'
					})
					return
				}
				
				if (this.conceptSearchResults[sector.name]) {
					const concept = this.conceptSearchResults[sector.name]
					this.navigateToConceptDetail(concept)
					return
				}
				
				let keyword = sector.name
					.replace(/(概念|板块|主题|行业)$/, '')
					.trim()
				
				const res = await uniCloud.callFunction({
					name: 'concept',
					data: {
						action: 'searchConcepts',
						params: {
							keyword: keyword
						}
					}
				})
				
				if (res.result.code === 200) {
					let concept = null
					
					if (res.result.data.list.length > 0) {
						concept = res.result.data.list.find(item => 
							item.name === sector.name || 
							item.name === keyword ||
							item.name.includes(keyword)
						)
						
						if (!concept) {
							concept = res.result.data.list[0]
						}
					}
					
					if (!concept) {
						concept = {
							id: '885338.TI',  // 融资融券的固定ID
							name: '融资融券',
							description: '两融概念相关股票',
							companies: 0
						}
					}
					
					this.conceptSearchResults[sector.name] = concept
					this.navigateToConceptDetail(concept)
				} else {
					uni.showToast({
						title: '未找到相关板块',
						icon: 'none'
					})
				}
			} catch (e) {
				console.error('搜索板块失败:', e)
				uni.showToast({
					title: '搜索板块失败',
					icon: 'none'
				})
			}
		},

		navigateToConceptDetail(concept) {
			uni.navigateTo({
				url: `/pages/concept/detail?id=${concept.id}`
			})
		}
	}
}
</script>